<template>
    <div id="introduce">
      <div class="warpbox">
          <div>
            <img src="@/assets/introduce/bg_02.jpg" alt="">
          </div>
          <div>
            <img src="@/assets/introduce/bg_03.jpg" alt="">
          </div>
          <div>
            <img src="@/assets/introduce/bg_04.jpg" alt="">
          </div>
          <div class="footerBox fixBottom">
            <div class="f_btn page_f" @click="openForm">

            </div>
            <img src="@/assets/introduce/bg_05.jpg" alt="">
          </div>
      </div>

      <el-dialog class="formDialog" :show-close="false" :visible.sync="sub_ok_visible" top="0vh">
        <div class="form-head">
          <img @click="sub_ok_visible = false" class="head_close" src="@/assets/introduce/form_close.png" alt="">
          <img src="@/assets/introduce/form_head.png" alt="">
          <img class="head_title" src="@/assets/introduce/sub_ok.png" alt="">
        </div>
        <div class="form-body" style="color:#fc4c80;padding: 0.5rem;font-size: 0.35rem;">
          我们客服会在1-2个工作日内和您联系哦，请耐心等待
        </div>
        <div class="form_foot" style="text-align: center">
          <div class="f_btn page_form" @click="sub_ok_visible = false">

          </div>
          <img src="@/assets/introduce/bg_05.jpg" alt="">
        </div>
      </el-dialog>

      <el-dialog class="formDialog" :show-close="false" :visible.sync="formVisible" top="0vh">
        <div class="form-head">
          <img @click="formVisible = false" class="head_close" src="@/assets/introduce/form_close.png" alt="">
          <img src="@/assets/introduce/form_head.png" alt="">
          <img class="head_title" src="@/assets/introduce/head_title.png" alt="">
        </div>
        <div class="form-body">
            <el-form :model="formData" :rules="formRule" ref="formMM">
              <el-form-item prop="username" label="姓名" :label-width="formLabelWidth">
                  <el-input v-model="formData.username"></el-input>
              </el-form-item>
              <el-form-item prop="phone_mob" label="手机号" :label-width="formLabelWidth">
                <el-input v-model="formData.phone_mob"></el-input>
              </el-form-item>
            </el-form>
          <div class="body_title">
            <img src="@/assets/introduce/body_title.png" alt="">
          </div>
          <div class="radio-group">
            <el-radio v-model="radio" label="1">01 【VISIA皮肤检测】</el-radio>
            <el-radio v-model="radio" label="2">02 【超微小气泡】</el-radio>
            <el-radio v-model="radio" label="3">03 【水氧活肤】</el-radio>
          </div>
        </div>
        <div class="form_foot">
          <div class="f_btn page_form_one" @click="submitForm">
          </div>
          <img src="@/assets/introduce/bg_05.jpg" alt="">
        </div>
      </el-dialog>
      <div id="iCenter"></div>
    </div>
</template>

<script>
  import { postItem } from '@/api/special';
  import { Indicator } from 'mint-ui'; //加载提示
    export default {
        name: "introduce",
        data () {
          const CheckName = (rule, value, callback) => {
            if (!value) {
              callback(new Error('请输入姓名'));
            }  else {
              callback();
            }
          }
          const CheckTel = (rule, value, callback) => {
            let tempValue = value * 1
            if (!value) {
              callback(new Error('请输入电话号码'));
            } else if (!Number.isInteger(tempValue)) {
              callback(new Error('电话号码必须是数字'));
            } else if (value.toString().length != 11) {
              callback(new Error('电话号码必须是11位'));
            } else {
              callback();
            }
          }
          return {
            sub_ok_visible:false,
            radio:'1',
            formVisible:false,
            address:'',
            formLabelWidth:'1.2rem',
            formData:{},
            tj_disabled:false,
            formRule:{
              username: [
                { validator: CheckName, trigger: 'blur' }
              ],
              phone_mob :[
                {validator:CheckTel,trigger:'blur'}
              ]
            },
          }
        },
        created(){
          this.createScript();
        },
        methods:{
          createScript(){
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = 'https://webapi.amap.com/maps?v=1.3&key=9ffe42e17300a715aebd32d0ba66b55a'   // 高德地图
            document.body.appendChild(script)
          },
          openForm(){
            this.formVisible = true;
          },
          initMap(){
            this.tj_disabled = true;
            var mapObj = new AMap.Map('iCenter');
            var that = this;
            mapObj.plugin('AMap.Geolocation', function () {
             var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认:true
                timeout: 10000,           // 超过10秒后停止定位，默认：无穷大
                maximumAge: 0,            // 定位结果缓存0毫秒，默认：0
                convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,         // 显示定位按钮，默认：true
                buttonPosition: 'LB',     // 定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                // showMarker: true,         // 定位成功后在定位到的位置显示点标记，默认：true
                // showCircle: true,         // 定位成功后用圆圈表示定位精度范围，默认：true
                // panToLocation: true,      // 定位成功后将定位到的位置作为地图中心点，默认：true
                // zoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
              });
              mapObj.addControl(geolocation);
              geolocation.getCurrentPosition();
              AMap.event.addListener(geolocation, 'complete', that.onComplete); // 返回定位信息
              AMap.event.addListener(geolocation, 'error', that.onError);       // 返回定位出错信息
            });
          },
          onComplete(obj){
            var temp = obj.addressComponent;
            this.address = temp.province + ( !!temp.district ? '/' + temp.district : '' ) + ( !!temp.township ? '/' + temp.township : '' ) ;
            this.postItem(this.getFormObj(this.address));
          },
          onError(obj) {
            this.postItem(this.getFormObj());
          },
          getFormObj(address){
            var formObj = Object.assign({},this.formData);
            formObj.check_id = this.radio;
            if(address){
              formObj.address = address;
            }
            return formObj;
          },
          postItem(obj){
            Indicator.open({
              text: '正在传输...',
              spinnerType: 'fading-circle'
            });
            postItem(obj).then(v=>{
              Indicator.close();
              this.formVisible = false;
              this.sub_ok_visible = true;
              this.tj_disabled = false;
            }).catch(v=>{
              Indicator.close();
              this.formVisible = false;
              this.tj_disabled = false;
              this.$message.error(v);
            })
          },
          submitForm(){
            this.$refs.formMM.validate(valid => {
              if(valid){
                if(this.tj_disabled){
                  return ;
                }
                this.initMap();
              }else {
                console.log('error submit!!')
                return false
              }
            })
          }
        }
    }
</script>

<style type="text/less" lang="less" scoped>
  @import "~@/styles/mixin.less";
 #introduce {
    .warpbox {
      margin-bottom: 60px;
    }
    .footerBox,.form_foot {
      position: relative;
      top: -2px;
      .f_btn {
        width: 75%;
        height: 75%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .center
      }
    }
   .footerBox.fixBottom {
     position: fixed;
     top: inherit;
     bottom: 0;
     left: 0;
     width: 100%;
   }
   .page_f {
     background-image: url('../assets/introduce/f_btn.png')
   }
   .page_form_one {
     background-image: url('../assets/introduce/tijiao.png')
   }
   .page_form {
     background-image: url('../assets/introduce/sure.png')
   }
   .form-head {
     position: relative;
     .head_title {
       width:75%;
       .center(80%,50%)
     }
     .head_close {
       width: 10%;
       .center(40%,90%)
     }
   }

   .form-body {
     position: relative;
     top: -2px;
     background-color: #ffeaf0;
     .body_title {
       text-align: center;
       padding-top: 0.45rem;
       padding-bottom: 0.42rem;
       img  {
         width: 75%;
       }
     }
     .radio-group {
       padding: 0.42rem 0 0.5rem;
     }
   }
 }
</style>
